<div class="layui-fluid">

    <div class="layui-row layui-col-space5">
        <script template type="text/html">
            {{#  layui.each(layui.admin.getPageAreas(),function(idx,item){ }}
            <div class="layui-col-md{{item.AreaCols}}">
                <div class="layui-card">
                    <div class="layui-card-header">{{item['PageName'+layui.admin.lang]}}</div>
                    {{# if(item.AreaType==='list'){ }}
                    <div class="layui-card-body">
                        <table id="{{item.Sign}}-table" lay-filter="{{item.Sign}}-table"></table>
                    </div>
                    {{# layui.data.doneList(item.Sign)} }}
                </div>
            </div>
            {{#  }) }}
        </script>
    </div>
</div>

<script>

    layui.data.doneList = function (sign) {

        layui.use('reForm', function () {
            var $ = layui.$
                , reForm = layui.reForm
                , form = layui.form
                , admin = layui.admin

                , tableId = sign
                , searchFormNo = tableId + '-search-form'
                , subFormNo = tableId + '-form';



            admin.jsonData('/json/table/' + tableId, function (tempTable) {
                var options = admin.stringToObj(tempTable);

                if (options.options)
                    delete options.options;

                if (options.autoSearch !== false) {
                    admin.jsonData('/json/form/' + searchFormNo, function (searchForm) {
                        var searchFormItemsData = admin.stringToObj(searchForm);
                        var html = '<form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="' + searchFormNo + '" id="' + searchFormNo + '">'
                            + layui.admin.getFormHtml(searchFormItemsData)
                            + '</form>';
                        layui.$('#' + tableId + '-table').parent().before(html);

                        $.each(searchFormItemsData, function (idx, json) {
                            reForm.bindFormHtml(json, null, searchFormNo);
                        });
                        options.searchForm = options.searchForm || {};
                        options.searchForm.searchFormItemsData = searchFormItemsData;
                        options.searchForm.searchFormNo = searchFormNo;

                        form.render(null, searchFormNo);
                        $('#' + searchFormNo + ' input:text').bind('keydown', function (event) {
                            if (event.keyCode == 13) {
                                $('#' + searchFormNo + ' [lay-event="search"]').click();
                            }
                        });
                        buildTable(options);
                    })
                    return;
                }
                buildTable(options);
            })
            function buildTable(options) {
                options.buildType = 1;
                options.tableId = tableId;

                if (options.tableOptions) {
                    if (options.tableOptions.options)
                        delete options.tableOptions.options;

                    if (options.tableOptions.where) {
                        options.tableOptions.where = layui.admin.funObj(options.tableOptions.where);
                        if (options.tableOptions.where.SearchWhere)
                            options.tableOptions.where.SearchWhere = JSON.stringify(options.tableOptions.where.SearchWhere);
                    }

                    if (options.tableOptions.initSort)
                        options.tableOptions.initSort = layui.admin.funObj(options.tableOptions.initSort);
                }

                if (options.formOptions) {
                    if (options.formOptions.options)
                        delete options.formOptions.options;

                    if (options.autoForm !== false && !options.formOptions.url) {
                        admin.jsonData('/json/form/' + (options.formOptions.formLay || subFormNo), function (subForm) {
                            var subFormItemsData = admin.stringToObj(subForm);
                            var html = '<form class="layui-form " lay-filter="' + subFormNo + '" id="' + subFormNo + '">'
                                + layui.admin.getFormHtml(subFormItemsData)
                                + layui.admin.getFormBtn(tableId)
                                + '</form>';
                            options.formOptions.formLay = subFormNo;
                            options.formOptions.formHtml = html;
                            options.formOptions.FormItemsData = subFormItemsData;

                            initTable(options);
                        })
                        return;
                    }
                }
                initTable(options);
            }

            function initTable(options) {
                if (options.tableType === 'table') {
                    layui.use('reTable', function () {
                        var reTable = layui.reTable;

                        reTable.initTable(options);
                    })
                } else {
                    layui.use('reTreeGrid', function () {
                        var reTreeGrid = layui.reTreeGrid;

                        reTreeGrid.initTreeGrid(options);
                    })
                }
            }
        })
    }
</script>